<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/product.css" />
		<link rel="stylesheet" href="font/iconfont.css" />
	</head>
	<body>
		<!-- 头部 -->
		<header>
			<!-- 中间版心宽度导航 -->
			<div class="header">
				<!-- 左边 -->
				<a class="logo" href="index.html" ></a>
				
				<!-- 右边 -->
				<ul class="nav-r">
					<li class="login"><a href="">登录</a></li>
					<li class="register"><a href="">注册</a></li>
					<li class="nav-line">|</li>
					
					<!-- 购物车 -->
					<li class="cart">
						<p>购物车</p>
						<!-- 购物车子菜单 -->
						<div class="cart-subnav">
							<!-- 购物车内容 -->
							<!-- 暂无商品, 没有商品，没有登录 -->
							<!-- <div class="cart-msg">你的购物车暂无商品...</div> -->
							<!-- 中间购物车商品 -->
							<ul class="cart-list">
								<li class="goods">
									<a href=""><img src="img/goods.jpg" alt="" /></a>
									<div>
										<p>全棉插肩长袖T恤 | 百</p>
										<p>服装尺码:S;颜色:米白/黑;</p>
										<p>
											<span>数量：3件</span>
											<span>¥290.00</span>
											<span>¥390.00</span>
										</p>
									</div>
								</li>
								<li class="goods">
									<a href=""><img src="img/goods.jpg" alt="" /></a>
									<div>
										<p>全棉插肩长袖T恤 | 百</p>
										<p>服装尺码:S;颜色:米白/黑;</p>
										<p>
											<span>数量：3件</span>
											<span>¥290.00</span>
											<span>¥390.00</span>
										</p>
									</div>
								</li>
								<li class="goods">
									<a href=""><img src="img/goods.jpg" alt="" /></a>
									<div>
										<p>全棉插肩长袖T恤 | 百</p>
										<p>服装尺码:S;颜色:米白/黑;</p>
										<p>
											<span>数量：3件</span>
											<span>¥290.00</span>
											<span>¥390.00</span>
										</p>
									</div>
								</li>
							</ul>
							
							<!-- 下方按钮，跳转功能 -->
							<!-- 未登录 无购物车信息 -->
							<!-- <div class="cart-btn">快去抢购物良仓商品吧！</div> -->
							<!-- 登陆了 -->
							<div class="cart-btn">查看购物车</div>
						</div>
						
						
						
					</li>
					
					<li class="nav-line">|</li>
					
					<!-- 消息 -->
					<li class="message">
						<p>消息</p>
						<!-- 消息子菜单 -->
						<div class="message-subnav">
							<ul class="message-list">
								<li><a href="">动态</a><span>0</span></li>
								<li><a href="">评论</a><span>0</span></li>
								<li><a href="">私信</a><span>0</span></li>
								<li><a href="">粉丝</a><span>0</span></li>
								<li><a href="">喜欢</a><span>0</span></li>
								<li><a href="">通知</a><span>0</span></li>
							</ul>
							
						</div>
					</li>
					
					<li class="nav-line">|</li>
					<li class="add-product"><a href="">添加良品</a></li>
					<li class="agreement"><a href="">资质证照/协议规则</a></li>
				</ul>
			</div>
		</header>
		
		<!-- 导航 -->
		<nav>
			<ul>
				<li><a href="index.html">首页</a></li>
				<li>
					<a href="classify.html">商店</a>
					<!-- 商店子菜单 -->
					<div class="nav-subnav">
						<!-- 商店子菜单 左边 -->
						<ul class="nav-subnav-left">
							<!-- <li>
								<img src="img/nav_icon1.png" alt="" />
								<p>家居</p>
							</li> -->
							
						</ul>
						<!-- 商店子菜单 右边 -->
						<div class="nav-subnav-right">
							<img src="img/nav_banner.jpg" alt="" />
							<p>新视线：  2024年12月刊</p>
						</div>
					</div>
				</li>
				<li>
					<a href="">杂志</a>
					<!-- 杂志子菜单 -->
					<div class="magazine-list">
						<ul>
							<li><a href="">趣物</a></li>
							<li><a href="">数码</a></li>
							<li><a href="">汽车</a></li>
							<li><a href="">文化</a></li>
							<li><a href="">时尚</a></li>
							<li><a href="">美食</a></li>
							<li><a href="">建筑</a></li>
							<li><a href="">空间</a></li>
							<li><a href="">圈子</a></li>
							<li><a href="">清单</a></li>
							<li><a href="">活动</a></li>
							<li><a href="">视频</a></li>
						</ul>
					</div>
				</li>
				
				<li>
					<a href="">分享</a>
					<!-- 分享子菜单 -->
					<div class="share-list">
						<ul>
							<li><a href="">男士</a></li>
							<li><a href="">家居</a></li>
							<li><a href="">数码</a></li>
							<li><a href="">工具</a></li>
							<li><a href="">玩具</a></li>
							<li><a href="">美容</a></li>
							<li><a href="">孩子</a></li>
							<li><a href="">宠物</a></li>
							<li><a href="">饮食</a></li>
							<li><a href="">运动</a></li>
							<li><a href="">文化</a></li>
							<li><a href="">女士</a></li>
						</ul>
					</div>
				</li>
				
				<li><a href="">达人</a></li>
				<li><a href="">有偿资讯</a></li>
			</ul>
			
			<div class="search-content">
				<input type="text" placeholder="search..." name="" id="">
				<span></span>
			</div>
		</nav>
		
		<!-- 面包屑导航栏 -->
		<div class="breadcrumb-content">
			<a href="index.html">良仓</a><span>&gt;</span>
			<a href="index.html">商店</a><span>&gt;</span>
			<a href="" class="now-breadcrumb"></a><span>&gt;</span>
			<span class="now-breadcrumb-name">商店名</span>
		</div>
		
		<!-- 商品详情 -->
		<div class="goods-content">
			<!-- 左边 -->
			<div class="goods-left">
				<!-- 上 -->
				<div class="goods-product">
					<!-- 放大镜 zoom-->
					<div class="product-left">
						
						<!-- up 鼠标移入移出-->
						<div class="zoom-up">
							<img class="small-img" src="img/goods.jpg" alt="">
							<div class="slide"></div>
							<!-- 右边大图 -->
							<div class="zoom-big">
								<img class="big-img" src="img/goods.jpg" alt="" />
							</div>
						</div>
						<!-- down -->
						<div class="zoom-down">
							<a href="javascript:;" class="prev"></a>
							<a href="javascript:;" class="next"></a>
							<div class="list-content">
								<ul class="zoom-down-list">
									<li><img src="img/goods.jpg" alt="" /></li>
									<li><img src="img/goods.jpg" alt="" /></li>
									<li><img src="img/goods.jpg" alt="" /></li>
									<li><img src="img/goods.jpg" alt="" /></li>
									<li><img src="img/goods.jpg" alt="" /></li>
								</ul>
							</div>
						</div>
					</div>
					
					<!-- 商品名称数据 -->
					<div class="product-right">
						<p class="start"><span class="iconfont icon-aixin_shixin"></span><span>5</span></p>
						<p class="brand">Sowaca</p>
						<p class="goods-name">双耳烹饪盘|烹煮后可直接端上桌</p>
						<p class="price"><span>价格:</span><span>￥255元</span></p>
						<p><span>免运费</span><span>正品授权</span></p>
						<div>
							<span>款式:</span>
							<ul calss="design-content">
								<li><img src="img/goods1.jpg" /></li>
								<li><img src="img/goods1.jpg" /></li>
								<!-- <li><img src="img/goods1.jpg" /></li>
								<li><img src="img/goods1.jpg" /></li>
								<li><img src="img/goods1.jpg" /></li> -->
							</ul>
						</div>
						<p><span>数量:</span>
							<img src="img/product-.png" alt="" />
							<input type="number" value="1"/>
							<img src="img/product+.png" alt="" />
						</p>
						<button>立即购买</button>
						<button>加入购物车</button>
					</div>
				</div>
				
				<!-- 下 -->
				<div class="goods-detail">
					<div class="detail-img"></div>
					<!-- 下面 品牌介绍 -->
					<div class="detail-message">
						<!-- 良仓简介 -->
						<div class="lc-recommend"><span>良仓简介</span></div>
						<p class="lc-recommend-content">她让我们舒适，让我们温暖，也在一直关照着我们。陪我们穿过人潮人海、经历繁华、享受孤单，无论身处地铁、火车、飞机、大巴，都能享受偷得浮生半日闲的私密时刻。她，就是鸵鸟枕。</p>
						<!-- 品牌简介 -->
						<div class="brand-synopsis"><span>品牌简介</span></div>
						<p class="brand-synopsis-content">她让我们舒适，让我们温暖，也在一直关照着我们。陪我们穿过人潮人海、经历繁华、享受孤单，无论身处地铁、火车、飞机、大巴，都能享受偷得浮生半日闲的私密时刻。当我们把她当帽子、围脖、眼罩、靠枕的时候，才意识到，我们已对她如此依赖，难舍难分。她，就是Ostrich Pillow ，西班牙 制造。</p>
						<!-- 商品描述 -->
						<div class="product-description"><span>商品描述</span></div>
						<p class="product-description-content">
							产地：西班牙
							<br />
							材质：95%    Viscose粘纤面料+5%    ELASTOMERO弹性纤维
							<br />
							填充物：保丽龙颗粒        (具有良好的流动性，并且不吸收水份)
							<br />
							颜色：内衬多款颜色可选（经典蓝，经典红，经典黄）
							<br />
							尺寸（外）：45L    x    28W    x    15H    cm
							<br />
							尺寸（内）：17.7L    x    11W    x    5.9H    cm
						</p>
						<!-- 购物指南 -->
						<div class="shopping-guide"><span>购物指南</span></div>
						<div class="shopping-guide-content">
							<p> — 所有商品均为正品保证。 </p>
							<p> — 中国大陆地区免运费 （偏远地区、受疫情和自然灾害影响、受节假日特殊活动等影响时，需承担部分运费)。</p>
							<p> — 包邮默认商家合作快递，如指定快递请联系客服，并承担运费差额。</p>
							<p> — 蜡烛、液态品、手表等含电池产品无法空运，运输时间相较普通空运件会更久。</p>
							<p> — 如出现产品质量问题请在签收后72小时内联系客服。</p>
						</div>
					</div>
				</div>
				
			</div>
			
			
			
			
			<!-- 右边猜你喜欢 -->
			<div class="goods-right">
				<div><span>猜你喜欢</span><button class="guess">换一换</button></div>
				<div class="goods-right-content">
					<div>
						<img src="img/goods1.jpg" alt="" />
						<p>电竞椅</p>
						<p>Razer</p>
						<p>￥3999</p>
					</div>
					<div>
						<img src="img/goods1.jpg" alt="" />
						<p>电竞椅</p>
						<p>Razer</p>
						<p>￥3999</p>
					</div>
					<div>
						<img src="img/goods1.jpg" alt="" />
						<p>电竞椅</p>
						<p>Razer</p>
						<p>￥3999</p>
					</div>
				</div>
			</div>
		</div>


		

		<!-- 底部 -->
		<div class="server-content">
			<!-- 版心宽度 -->
			<div class="bottom-server">
				<span class="iconfont icon-shouzhi"></span>
				<a href="">良仓商品 / OUR SHOP</a>
				
				<div class="bottom-img">
					<ul>
						<li>
							<div class="bottom-img-list">
								<div class="bottom-img1"></div>
								<div><p>全球精品</p><p>Global Selections</p></div>
							</div>
						</li>
						<li>
							<div class="bottom-img-list">
								<div class="bottom-img2"></div>
								<div><p>正品保证</p><p>Authenticity Guaranteed</p></div>
							</div>
						</li>
						<li>
							<div class="bottom-img-list">
								<div class="bottom-img3"></div>
								<div><p>全场包邮</p><p>Free Delivery</p></div>
							</div>
						</li>
						<li>
							<div class="bottom-img-list">
								<div class="bottom-img4"></div>
								<div><p>客服邮箱</p><p>kefu@iliangcang.com</p></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<!-- 返回顶部按钮 -->
		<div class="back-top"></div>
		
	</body>
</html>
